<script lang="ts" setup>
import { reactive,onMounted } from 'vue'

// do not use same name with ref
const formData = reactive({
    form: {
        zfbapp: '开启',
        zfbhzzid: '123456789',
        zfbdlzh: '1234567890@qq.com',
        zfbazmy: 'qwertyuioplkhgfdsazxcvbnm9ws4d5e8c2xr8c2525dsecsdc4d5f4s5s5r45w5r545rw51cyv5dfhv46hf5vh4f4fdhd1hcf2hcfh2fhfhhv2fhvf2dh2ffvh1f2f2hfmiusyztwwrbxwsf2c7advu7tv5rshc',
        zfbpgmy: 'aojddjyynu37q98n37557v095jnws5r45w5r545rw51cyv5dfhv46hf5vh4f4fdhd1hcf2hcfh2fhfhhv2fhvf2dh2ffvh1f2f2hfmiusyztwwrbxwsf2c7advu7tv5rshcf5875o8uieuektujei5tntetjetjetvetjje',
        zfbgy: 'sriuykvaujfkcnhkjfhkdthkvwytveoiwnvyesicow5t7ct5ev54e6y7eyae6c235vr5bb53r2v3542354v235h2435hv2h35v1h52v35h3h2fr3h52h3h23h2hrh2232b2bbb22b2b2butsjctsxsrtnwucjtebkdjtckti',
        zfbpc: '关闭',
        zfbjym: 'sjhfusufsfsfshnfsfgsekf',
        pgzfkg: '开启',
        wxzfkg: '关闭',
        wxzf: '开启',
        wxkfappid: 'njdgtngctdtkgu',
        wxkfappseceret: 'd7s7stst5555t5777',
        wxswh: '877756776',
        wxmy: 'rhrtcyrtctrisrtersrtw',
        zds: '开启',
        zdsyyid: '97976698898',
        zdss: 'dutyactuty6eucetiutcwWUTIWTUWCTUwiiuGMUTIUVEKJTCUTGWUTGIUIUTEKJTIUTNWTUIUCNEETUTUHKAEECHKNHKCMTEHIVETHMEKTHAKVTHEHGDGhsgruxtstddjckdjtnktjkjctdjtdkdcdnktk',
        zdsz: 'fyudrytsddtuihcdytdjtdvtndiuvdurtydututhf25f6v2uvu3vd3y5i2f52u35fdud352uv35vu235u2dv3u55ud2fu3u2s3usv2u2b5byi2d5v75cy7f57u7v5uu56uubu72u6u586u72et68ue5u268bu7e2b',
    }

})

const onSubmit = () => {
    console.log('submit!')
}

import axios from 'axios'
import { ElMessage } from 'element-plus';
const getZfsz = () => {
    //参考接口文档，请求用户数据
    axios.get("/api/u/zhiFuSheZhi/").then((response) => {
        console.log(response, "网站信息数据reponse")
        //更新用户数据
        formData.form = response.data[0]
        console.log(formData.form, "接收网站信息数据")
    })
}

onMounted(() => {
    getZfsz()
})

const updateZfsz = () => {
    console.log(formData.form, "<-----1111修改网站信息数据")
    axios.patch("/api/u/zhiFuSheZhi/1/",
        formData.form,
        { headers: { "Content-Type": "application/json" } }   //
    ).then((response) => {
        console.log(response, "<-----修改网站信息数据")
        // 更新用户数据
        formData.form = response.data
        ElMessage({
            type:"success",
            message:"信息保存成功"
        })
    })
    
}

</script>


<template>
    <el-form :model="formData.form" label-width="auto" style="max-width: 1000px">
        <el-form-item label="支付宝APP">
            <el-select v-model="formData.form.zfbapp">
                <el-option label="开启" value="开启" />
                <el-option label="关闭" value="关闭" />
            </el-select>
            <h3>支付宝APP支付是否开启</h3>
        </el-form-item>
        <el-form-item label="支付宝合作者身份ID">
            <el-input v-model="formData.form.zfbhzzid" />
        </el-form-item>
        <el-form-item label="支付宝登录账号">
            <el-input v-model="formData.form.zfbdlzh" />
        </el-form-item>
        <el-form-item label="支付宝安卓密钥">
            <el-input v-model="formData.form.zfbazmy" type="textarea" />
            <h3>支付宝安卓密钥pkcs8</h3>
        </el-form-item>
        <el-form-item label="支付宝苹果密钥">
            <el-input v-model="formData.form.zfbpgmy" type="textarea" />
            <h3>支付宝苹果密钥pkcs8</h3>
        </el-form-item>
        <el-form-item label="支付宝公钥">
            <el-input v-model="formData.form.zfbgy" type="textarea" />
        </el-form-item>
        <el-form-item label="支付宝PC">
            <el-select v-model="formData.form.zfbpc">
                <el-option label="开启" value="开启" />
                <el-option label="关闭" value="关闭" />
            </el-select>
        </el-form-item>
        <el-form-item label="支付宝校验码">
            <el-input v-model="formData.form.zfbjym" />
            <h3>支付宝校验码（PC扫码支付） （对应为 开放平台=》mapi网关产品=》MD5密钥）</h3>
        </el-form-item>
        <el-form-item label="苹果支付开关">
            <el-select v-model="formData.form.pgzfkg">
                <el-option label="开启" value="开启" />
                <el-option label="关闭" value="关闭" />
            </el-select>
        </el-form-item>
        <el-form-item label="微信支付PC">
            <el-select v-model="formData.form.wxzfkg">
                <el-option label="开启" value="开启" />
                <el-option label="关闭" value="关闭" />
            </el-select>
        </el-form-item>
        <el-form-item label="微信支付">
            <el-select v-model="formData.form.wxzf">
                <el-option label="开启" value="开启" />
                <el-option label="关闭" value="关闭" />
            </el-select>
        </el-form-item>
        <el-form-item label="微信开放平台移动应用AppID">
            <el-input v-model="formData.form.wxkfappid" />
        </el-form-item>
        <el-form-item label="微信开放平台移动应用appsecret">
            <el-input v-model="formData.form.wxkfappseceret" />
        </el-form-item>
        <el-form-item label="微信商户号mchid">
            <el-input v-model="formData.form.wxswh" />
        </el-form-item>
        <el-form-item label="微信密钥key">
            <el-input v-model="formData.form.wxmy" />
        </el-form-item>
        <el-form-item label="支付宝-当面付-扫码付开关">
            <el-select v-model="formData.form.zds">
                <el-option label="开启" value="开启" />
                <el-option label="关闭" value="关闭" />
            </el-select>
        </el-form-item>
        <el-form-item label="支付宝-当面付-扫码付 应用ID">
            <el-input v-model="formData.form.zdsyyid" />
            <h3>账号中心->密钥管理->开放平台密钥</h3>
        </el-form-item>
        <el-form-item label="支付宝-当面付-扫码付 商户私钥">
            <el-input v-model="formData.form.zdss" type="textarea" />
            <h3>填写对应签名算法类型（RSA2）的私钥，如何生成密钥参考：http://docs.open.alipay.com/291/105971和http://docs.open.alipay.com/200/105310
            </h3>
        </el-form-item>
        <el-form-item label="支付宝-当面付-扫码付 支付宝公钥">
            <el-input v-model="formData.form.zdsz" type="textarea" />
            <h3>账户中心->密钥管理->开放平台密钥，找到添加了支付功能的应用，根据你的加密类型，查看支付宝公钥</h3>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="updateZfsz">保存</el-button>
        </el-form-item>
    </el-form>
</template>

<style scoped>
.el-form-item h3 {
    color: #999;
    font-size: 14px;
}

.el-button {
    margin-left: 255px;
}
</style>
